<template>
  <div id="radarBox" ref="radarBox" style="width:600px;height:400px;">雷达图</div>
</template>
<script>
// 完整加载echarts
// 注意：echarts从5开始没有默认导出了
// 不允许： import  Echarts from 'echarts'
import * as Echarts from 'echarts'
/*
1、script 的src引入echarts的js文件
2、给个容器，给个宽高，给id
3、通过  let echarts = Echarts.init(挂载的DOM节点)
4、echarts.setOption(配置)
*/
// 导入雷达图基础配置数据
import radarData from './radarData'
export default {
  name: 'RadarEcharts',
  mounted() {
    // 生命周期最早可以使用$refs的位置是在mounted里面。因为这个时候组件dom才渲染好
    // let echarts = Echarts.init(document.getElementById('radarBox'))
    // 实例化echarts对象
    this.echarts = Echarts.init(this.$refs.radarBox)
    // 设置配置(基础的结构，还没有图标数据还没有)
    this.echarts.setOption(radarData)
    // 请求网络数据
    this.initData()
  },
  methods: {
    // 获取图标数据
    initData() {
      // 模拟ajax
      setTimeout(() => {
        const value1 = [4200, 3000, 20000, 35000, 50000, 18000]
        const value2 = [5000, 14000, 28000, 26000, 42000, 21000]
        // 处理数据
        radarData.series[0].data[0].value = value1
        radarData.series[0].data[1].value = value2
        // 重新绘制
        this.echarts.setOption(radarData)
      }, 3000)
    }
  }
}
</script>
<style>
</style>
